<template>
  <view class="container">
    <view class="content">

      <view>
        <uv-calendars mode="range" allowSameDay ref="calendars" @confirm="confirmCalendars" rangePrompt="31"/>
      </view>
      <uv-sticky bgColor="#fff">
        <view style="display: flex; ">
          <uv-tags borderColor="#FFFFFF" type="info" @click="openCalendars" text="选择日期:"
                   icon="calendar" plain></uv-tags>
          <uv-text type="info" :text="rangeData" @click="openCalendars"></uv-text>
          <uv-tags v-if="rangeData" borderColor="#FFFFFF" text="重置" plain @click="restCalendars"></uv-tags>
        </view>

        <uv-subsection :list="subsectionList" :current="current" @change="clickFn"></uv-subsection>

        <view class="search-box">
          <uv-search @change="changeFn" placeholder="请输入货物名" :show-action="false" :border="false" bgColor="#FFFFFF" borderColor="#d8d8d8"
                     v-model="queryParams.commodityName" shape="square" :clearabled="true" @clear="clear"></uv-search>
        </view>
      </uv-sticky>

      <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
        <view class="list-item" v-for="(item, index) in dataList" :key="index">
          <view class="flex-box">
            <view class="wid">
              <view class="flex">
                <uv-text :lines="2" :text="`${item.commodityName} - ${item.categoryName}`"></uv-text>
              </view>
            </view>
            <view class="">
              <uv-tags v-if="item.status===3" :text="'撤单'" type="error" size="mini" plain></uv-tags>
              <uv-tags v-else-if="item.status===2" :text="'已到货'" type="success" size="mini"
                       plain></uv-tags>
              <uv-tags v-else-if="item.status===1" :text="'未到货'" type="warning" size="mini"
                       plain></uv-tags>
            </view>
          </view>

          <view class="flex-box">
            <uv-image :customStyle="{border: '1rpx solid #dddddd'}" shape="square" radius="5px" fade
                      lazyLoad width="154rpx" height="120rpx" :src="item.productPicture"></uv-image>

            <view>
              <view class="text-box">
                <view class="text-gray">单价：{{ item.unitPrice }}</view>
                <view class="text-gray">采购数量：{{ item.number }}</view>
              </view>
            </view>

            <view>
              <view class="text-box">
                <view class="text-gray">金额：{{ item.amount }}</view>
                <view class="text-gray">实到数量：{{ item.actualNumber }}</view>
              </view>
            </view>
          </view>

          <view class="flex">
            <view class="text-gray">到货日期：{{ item.arrivalDate }}</view>
          </view>
          <view class="flex">
            <view class="text-gray">采购日期：{{ item.purchaseTime }}</view>
          </view>
        </view>
      </mescroll-body>
    </view>
  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import CommoditySummaryAPI from '@/api/commoditysummary'
import {dateFormat} from "@/utils/media";

export default {
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      rangeData: '',
      current: 0,
      subsectionList: [{
        name: '未到货',
        index: 0,
      }, {
        name: '已到货',
        index: 1,
      },
        {
          name: '撤单',
          index: 2,
        }
      ],
      queryParams: {
        current: 1,
        size: 10,
        status: 1, // 1 未到货 2 已到货 3 撤单
        startTime: '',
        endTime: ''
      },
      dataList: [],
      loading: true,
    };
  },

  onLoad(e) {
    // 默认日期范围
    const afterTime = new Date();
    this.queryParams.startTime = dateFormat(afterTime, 'yyyy-MM-dd')
    this.queryParams.endTime = dateFormat(afterTime, 'yyyy-MM-dd')
    this.rangeData = this.queryParams.startTime + ' ~ ' + this.queryParams.endTime
  },

  methods: {

    /*上拉加载的回调*/
    upCallback(page) {
      let me = this
      me.queryParams.current = page.num; // 页码, 默认从1开始
      CommoditySummaryAPI.commoditySummaryList(me.queryParams).then(res => {
        let curPageData = res.data.records
        // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
        let curPageLen = curPageData.length;
        // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
        let totalPage = res.data.totalPage
        me.total = res.data.total
        //设置列表数据
        if (page.num === 1) this.dataList = []; //如果是第一页需手动置空列表
        this.dataList = this.dataList.concat(curPageData); //追加新数据

        // 请求成功,隐藏加载状态
        //方法一(推荐): 后台接口有返回列表的总页数 totalPage
        this.mescroll.endByPage(curPageLen, totalPage);
      })
    },
    changeFn() {
      let me = this;
      me.queryParams.current = 1
      me.dataList = []
      //(内部会自动page.num=1,再主动触发up.callback)
      this.mescroll.resetUpScroll();
    },
    clear() {
      this.queryParams = {
        current: 1,
        size: 10
      }
      this.dataList = []
      //(内部会自动page.num=1,再主动触发up.callback)
      this.mescroll.resetUpScroll();
    },

    // 打开日历
    openCalendars() {
      this.$refs.calendars.open();
    },
    confirmCalendars(e) {
      let me = this;
      me.rangeData = e.range.before + ' ~ ' + e.range.after

      me.queryParams.current = 1
      me.queryParams.startTime = e.range.before
      me.queryParams.endTime = e.range.after

      this.changeFn()
    },
    restCalendars() {
      let me = this;
      me.rangeData = ''
      me.queryParams.current = 1
      me.queryParams.startTime = ''
      me.queryParams.endTime = ''
      this.changeFn()
    },
    // 状态切换刷新列表
    clickFn(e) {
      this.current = e;
      this.queryParams.status = e + 1
      this.changeFn()
    }
  }
}
</script>

<style scoped>
.content {
  margin: auto 0.3rem;
}

.list-item {
  width: 90%;
  margin: 0.3rem auto;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.flex-box {
  display: flex;
  justify-content: space-between;
}

.wid {
  width: 80%;
}

.flex {
  display: flex;
  justify-content: space-between;
  line-height: 1.4rem;
}
.text-box {
  min-width: 200rpx;
  display: flex;
  flex-direction: column;
  gap: 8rpx;  /* 控制行间距 */
  width: 100%; /* 根据布局需要调整 */
}
.text-gray {
  font-size: 14px;
  color: gray;
  margin: 0.2rem 0;
}
</style>